<!-- 条件渲染指令 v-show -->
<!-- v-show隐藏时只是在样式中添加display:none;实际上自身节点还是一直存在 -->
<!-- v-if:从页面中移除或者添加dom元素(消耗性能),频繁渲染推荐使用v-show -->
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)

const age = ref(8)
</script>

<template>
  <div>
    <h1>v-show</h1>
    <div><button @click="show = !show">点我展示/隐藏图片</button></div>
    <hr />
    <img
      v-show="show"
      src="https://q9.itc.cn/q_70/images03/20240608/3933c5cdac524c41aa8b94e5c5099f2d.jpeg"
      alt=""
    />
  </div>

  <div>
    <h1>v-if</h1>
    <div><button @click="show = !show">点我展示/隐藏图片</button></div>
    <hr />
    <img
      v-if="show"
      src="https://q9.itc.cn/q_70/images03/20240608/3933c5cdac524c41aa8b94e5c5099f2d.jpeg"
    />
  </div>

  <div>
    <h1>v-if->v-else-if->v-else的使用</h1>
    <button @click="age+=2">年龄增长2:{{ age }}</button>
    <p v-if="age < 10">你还小,出去玩泥巴</p>
    <p v-else-if="age>=10 && age<18">还没到18岁,偷偷去网吧</p>
    <p v-else>终于18岁了,独自去网吧</p>
  </div>
</template>

<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
